<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="addFn">添加员工</el-button>
      </el-row>
      <hr>
      <!-- 表格内容 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          label="操作"
          width="280"
        >
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="setPart(row.id)">设置角色</el-button>
            <el-button size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

    </el-card>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </el-row>
    <!-- 弹框 -->
    <AddDialog ref="refAdd" :is-show.sync="isVisible" @roleList="updateEmployeesList" />

    <!-- 分配权限 -->
    <EmployeesPermission ref="permissionRef" :count="3" :is-role.sync="isRole" />
  </div>
</template>

<script>
import { getEmployeesList, totalEmployees, delRoles } from '@/api/employees'
import AddDialog from './components/add-dialog.vue'
import EmployeesPermission from './components/employeesPermission.vue'
export default {
  components: {
    AddDialog: AddDialog,
    EmployeesPermission: EmployeesPermission
  },
  data() {
    return {
      tableData: [{
        username: '', // 用户名，
        email: '' // 邮箱
      }],
      isVisible: false, // 控制添加弹框
      isRole: false, // 控制分配角色弹框
      total: 0, // 总数
      pageSize: 4, // 每页的数量
      start: 1, // 开始获取的位置
      page: 1// 当前页码
    }
  },

  created() {
    this.updateEmployeesList()
  },
  methods: {
    //
    updateE() {
      console.log(1)
    },
    // 删除
    async delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page = this.page - 1
        }
        // 调用接口删除数据
        await delRoles(id)
        // console.log(this.tableData.length)

        // 刷新页面
        this.updateEmployeesList()

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 设置角色
    setPart(id) {
      this.isRole = true
      this.$refs.permissionRef.getRoles(id)
    },
    // 编辑
    editFn(id) {
      // console.log(id)
      this.isVisible = true
      // 调用子组件的函数
      this.$refs.refAdd.backData(id)
    },
    // 分页
    currentChange(page) {
      // console.log(page)
      this.page = page
      // 刷新
      this.updateEmployeesList()
    },
    // 添加
    addFn() {
      // console.log(1);
      this.isVisible = true
    },
    // 数据列表
    async updateEmployeesList() {
      // 算下标
      // console.log('1');
      this.start = (this.page - 1) * this.pageSize
      // 调用接口
      const res = await getEmployeesList(
        {
          _start: this.start,
          _limit: this.pageSize
        }
      )
      this.tableData = res.data
      // console.log(res.data)

      // 总数量
      const result = await totalEmployees()
      this.total = result.data
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 20px;
}
</style>
